<div appBsModal #contentListModal="bs-modal"  class="modal fade" tabindex="-1" role="dialog"
    aria-labelledby="editModal" aria-hidden="true" [config]="{backdrop: 'static', keyboard: true}">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    <span *ngIf="title">{{title}}</span>
                </h4>

                <span class="pull-right" style="display:inline-block">
                    <button class="btn btn-xs2 btn-primary blue  mr-1" (click)="swapOrder()"
                        *ngIf="permissionDic['Pages_Manage_Content_Update']">
                        <i class="bi bi-arrow-down-up"></i> {{"Order" | localize}}
                    </button>
                    <button class="btn btn-xs2 btn-primary blue  mr-1" (click)="create()"
                        *ngIf="permissionDic['Pages_Manage_Content_Create']">
                        <i class="fa fa-plus"></i> {{"CreateNew" | localize}}
                    </button>
                    <button class="btn btn-xs2 btn-primary blue mr-1" (click)="changeState(true)"
                        *ngIf="permissionDic['Pages_Manage_Content_Publish']">
                        <i class="fa fa-book"></i> {{"Release" | localize}}
                    </button>
                    <button class="btn btn-xs2 btn-warning  mr-1" (click)="changeState(false)"
                        *ngIf="permissionDic['Pages_Manage_Content_Publish']">
                        <i class="fa fa-reply"></i> {{"CancelRelease" | localize}}
                    </button>
                    <button class="btn btn-xs2 btn-warning mr-2" click)="delete()" *ngIf="permissionDic['Pages_Manage_Content_Delete']">
                        <i class="fa fa-trash"></i> {{"Delete" | localize}}
                    </button>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
                        <i aria-hidden="true" class="bi bi-x"></i>
                    </button>
                </span>
            </div>
            <div class="modal-body" [busyIf]="isLoading">
                <div>
                    <form class="form" autocomplete="new-password">
                        <div>
                            <div class="row align-items-center mb-4">
                                <div class="col-xl-12">
                                    <div class="form-group m-form__group align-items-center">
                                        <div class="input-group">
                                            <input [(ngModel)]="inputPara.filter" name="filterText" autoFocus
                                                   class="form-control m-input" [placeholder]="l('SearchWithThreeDot')"
                                                   type="text">
                                            <div class="input-group-append">
                                                <button (click)="getListData()" class="btn btn-default"
                                                        type="submit">
                                                    <i class="icon-magnifier"
                                                       [attr.aria-label]="l('Search')"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row" *ngIf="advancedFiltersAreShown">
                                <div class="col-xl-6">
                                    <div class="form-group">
                                        <label class="control-label">{{"InfoState" | localize}}</label>
                                        <select class="form-control" name="infoState" (change)="getListData()" [(ngModel)]="inputPara.infoState">
                                            <option value="#" >{{"InfoState" | localize}}</option>
                                            <option value="ActiveState">{{"HasRelease" | localize}}</option>
                                            <option value="UnActiveState">{{"NotRelease" | localize}}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-4" >
                                <div class="col-sm-12">
                                    <span class="clickable-item text-muted" *ngIf="!advancedFiltersAreShown"
                                          (click)="advancedFiltersAreShown=!advancedFiltersAreShown">
                                        <i class="fa fa-angle-down"></i> {{"ShowAdvancedFilters" | localize}}
                                    </span>
                                    <span class="clickable-item text-muted" *ngIf="advancedFiltersAreShown"
                                          (click)="advancedFiltersAreShown=!advancedFiltersAreShown">
                                        <i class="fa fa-angle-up"></i> {{"HideAdvancedFilters" | localize}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div class="row align-items-center">
                        <!--<Primeng-TurboTable-Start>-->
                        <content2-list-tab #contentListTab [primengTableHelper]="primengTableHelper"
                                          [permissionDic]="permissionDic"
                                          [pageConfig]="pageConfig"
                                          (getListData)="getListData($event)"
                                          (goRelatePage)="goRelatePage($event)"
                                          (editModal)="editModal($event)"></content2-list-tab>
                        <!--<Primeng-TurboTable-End>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 
<content2-detail-modal #contentDetailModal (backListEvent)="reloadPage()"></content2-detail-modal>
<order-by-modal #orderByModal (callback)="getListData($event)"></order-by-modal>
